<template>
  <div class="three">
    <div ref="container"></div>
  </div>

  <div id="x">切换</div>
  <div id="bu" class="bu">播放</div>
</template>

<script setup lang="ts">
// 下面引入便于一步一步教程，自己写全放一个就行了
import {
  WebGLRenderer, //渲染器
  Scene, //场景
  PerspectiveCamera, //相机
  Color,
  PlaneGeometry,
  TextureLoader,
  Clock,
  PointLight, // 颜色转换
} from "three";
import {
  AxesHelper, // 辅助坐标
} from "three";
import {
  Mesh,
  IcosahedronGeometry,
  SpotLight,
  DoubleSide,
  MeshBasicMaterial,
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import type { Deps } from "@/ThreeClass/publicDeps";
import { RenGLTFLoader } from "@/ThreeClass/RenGLTFLoader";
import { RenGLTFLoaderJiqi } from "@/ThreeClass/RenGLTFLoaderJiqi";
import { ref, onMounted } from "vue";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { pineaInit } from "@/ThreeClass/initPinea";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
const container = ref<HTMLElement | null>(null); // 插入的dom元素
const scene: Scene = new Scene(); // 场景
const camera = new PerspectiveCamera(60, window.innerWidth / 600, 1, 10000); // 镜头
camera.position.set(0, 5, 300);
const renderer = new WebGLRenderer(); // 渲染器
const deps = ref<Deps>();
const axisHelper = new AxesHelper(2000);
const clock = new Clock();
const gltfLoader = new GLTFLoader();
const textureLoader = new TextureLoader();
// 设置元素，默认x,y,z为 红绿蓝
// axisHelper.setColors(
//   "rgb(256, 00, 00)",
//   "rgb(00, 256, 00)",
//   "rgb(00, 00, 256)"
// );
scene.add(axisHelper); // 把创建的坐标体系加入天地！
const light = new PointLight(0xffffff, 30, 100, 50);
light.position.set(0, 10, 10);
scene.add(light);
onMounted(() => {
  initThree();

  renderer.render(scene, camera); // 重新渲染

  document.getElementById("x").addEventListener("click", function () {
    camera.position.set(0, 1200, 0); //x轴方向观察

    camera.lookAt(0, 0, 0); //重新计算相机视线方向
  });
  camera.position.set(0, 300, 0); //x轴方向观察

  camera.lookAt(0, 0, 0); //重新计算相机视线方向
});
const initThree = () => {
  // 设置场景颜色
  scene.background = new Color("#ffffff"); // 设置背景色
  // 设置相机初始角度
  // camera.position.set(1, 1, 400);
  // 渲染器
  renderer.setSize(window.innerWidth, 600);
  (container.value as HTMLElement).appendChild(renderer.domElement); // 载入到dom

  // let controls = new OrbitControls(camera, renderer.domElement);
  // controls.addEventListener("change", (e) => {
  //   // console.log(e);
  //   // console.log("camera.position", camera.position);
  //   renderer.render(scene, camera);
  // });
  const gui = new GUI();
  deps.value = { renderer, gui, camera, scene, clock, gltfLoader, textureLoader };

  initRen();
  initJq();
  // addpineas();
  animate();
};
const ren = ref<RenGLTFLoader>();
const initRen = async () => {
  ren.value = new RenGLTFLoader(deps.value!);
  await ren.value.init();
};
const jiqi = ref<RenGLTFLoader>();
const initJq = async () => {
  jiqi.value = new RenGLTFLoaderJiqi(deps.value!);
  await jiqi.value.init();
};

const plane = ref();
const addpineas = async () => {
  plane.value = new pineaInit(deps.value!);
  await plane.value.init();
};

const addsun = () => {
  // 设置一个球体
  const geometry = new IcosahedronGeometry(1, 1);
  // 设置材质
  const material = new MeshBasicMaterial({
    color: new Color("#ff0000"),
    transparent: true,
    side: DoubleSide, // threejs为了提高效率默认只渲染单面，需要把 side:THREE.DoubleSide给设置上
  });
  // 根据球体大小 和材质，创建一个太阳
  const sun = new Mesh(geometry, material);
  sun.material.opacity = 1;
  sun.position.x = 0;
  sun.position.y = 0;
  sun.position.z = 0;

  scene.add(sun); // 把太阳加入天地
  renderer.render(scene, camera); // 重新渲染
};

const addPlane = () => {
  let planeGeometry = new PlaneGeometry(1000, 1000); //地面的材质，宽高
  let planeMaterial = new MeshBasicMaterial({ color: new Color("#efefef") });
  let plane = new Mesh(planeGeometry, planeMaterial); // 设置地面的位置
  plane.rotation.x = -0.48 * Math.PI; // 倾斜把竖着的垂直下来，具体参考圆周率
  scene.add(plane); //将地面添加到坐标轴中
};
addPlane();
function animate() {
  requestAnimationFrame(animate);

  ren.value?.update();

  // zhuanquan();

  renderer.render(scene, camera);
}
const R = 500; //相机圆周运动的半径
let angle = 0;
const zhuanquan = () => {
  angle += 0.001;
  camera.position.x = R * Math.cos(angle);
  camera.position.z = R * Math.sin(angle);
  camera.position.y = 100;
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  height: 600px;
}
.three {
  &-btn {
    position: absolute;
    top: 0px;
    left: 0;
    padding: 10px;
  }
}
</style>
